<template>
	<view class="container">

		<template>
			<view class="order-box">
				<view class="bg-white">
					<view class="section">
						<!-- store info begin -->
						<listCell :hover="false">
							<view class="store">
								<view class="storetitle">
									<view class="storetitle1" style="font-size: 20px;">
										{{ orderDetail.shopAddress?.shopName}}
									</view>
								</view>
								<view class="right">
									<image src="/static/images/order/mobile.png"
										style="width: 60rpx; height: 60rpx;margin-right: 30rpx;"></image>
									<image src="/static/images/order/navigation.png"
										style="width: 60rpx; height: 60rpx;"></image>
								</view>
							</view>
						</listCell>
						<!-- store info end -->
						<listCell :hover="false">
							<view class="goods">
								<view class="hao">
									<view class="sort-num">{{ orderDetail.pickupCode }}</view>
								</view>

								<view class="" style="margin-top: 10px;margin-bottom: 20px;">
									<unisteps v-if="orderDetail.deliveryMethod=='配送'" :options="list1" active-icon="checkbox" :active="active" />
									<unisteps v-else :options="list2" active-icon="checkbox" :active="active" />
								</view>

								<!-- steps end -->
								<!-- 	<view v-if="1<=1"
									class="steam">
									您前面还有 <text class="t">4</text> 单待制作
								</view> -->
								<!-- goods begin -->
								<view class="storeContent" style="margin-bottom: -40rpx;">
									<view class=""  v-for="(item ,index ) in orderDetail.items" :key="index">
										<view class="storeIn">
											<view class="storeleft">
												<view class="storeleft-title">{{ item.goodsName}}
												</view>
												<!-- <view class="storeleft-detail">{{ '标准糖,不要并' }}
												</view> -->
											</view>
											<view class="storeright">
												<view class="storeright-num">x{{ item.quantity }}</view>
												<view class="storerightprice">￥{{ item.price}}
												</view>
											</view>
										</view>
									</view>

						
								</view>




								<!-- goods end -->
							</view>
						</listCell>
					</view>
					<view class="section">
						<!-- payment and amount begin -->
						<listCell :hover="false" padding="50rpx 30rpx">
							<view class="w-100 d-flex flex-column">
								<view class="pay-cell">
									<view>支付方式</view>
									<view class="font-weight-bold">{{ "微信" }}</view>
								</view>
								<view class="pay-cell">
									<view>金额总计</view>
									<view class="font-weight-bold">￥{{ orderDetail.totalPrice }}</view>
								</view>
							</view>
						</listCell>
						<!-- payment and amount end -->
					</view>
					<view class="section">
						<!-- order info begin -->
						<listCell :hover="false" padding="50rpx 30rpx">
							<view class="w-100 d-flex flex-column">
								<view class="pay-cell">
									<view>下单时间</view>
									<view class="font-weight-bold">{{ orderDetail.orderTime }}</view>
								</view>
								<view class="pay-cell">
									<view>下单门店</view>
									<view class="font-weight-bold">	{{ orderDetail.shopAddress?.shopName}}</view>
								</view>
							<!-- 	<view class="pay-cell">
									<view>支付方式</view>
									<view class="font-weight-bold">{{ "微信" }}</view>
								</view> -->
								<view class="pay-cell">
									<view>订单号</view>
									<view class="font-weight-bold">{{orderDetail.orderNumber  }}</view>
								</view>
							</view>
						</listCell>
						<!-- order info end -->
					</view>
					<!-- order other info begin -->
					<listCell :hover="false" padding="50rpx 30rpx 20rpx" last>
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>取单号</view>
								<view class="font-weight-bold">{{ orderDetail.pickupCode }}</view>
							</view>
							<view class="pay-cell">
								<view>享用方式</view>
								<view class="font-weight-bold">{{orderDetail.deliveryMethod}}</view>
							</view>
							<view class="pay-cell">
								<view>取餐时间</view>
								<view class="font-weight-bold">立即取餐</view>
							</view>
							<view class="pay-cell">
								<view>完成制作时间</view>
								<view class="font-weight-bold">{{  orderDetail.orderTime }}</view>
							</view>
							<view class="pay-cell">
								<view>备注</view>
								<view class="font-weight-bold">{{ }}</view>
							</view>
						</view>
					</listCell>
					<!-- order other info end -->
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import listCell from '@/components/list-cell/list-cell1'
	import unisteps from "@/uni_modules/uni-steps/components/uni-steps/uni-steps.vue"

	import {
		userInfo
	} from "@/stores/userInfo"
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from "vue"

	let active = ref(2)
	let orderDetail = ref({})

	let list1 = reactive([{
		title: '待接单'
	}, {
		title: '配货中'
	}
	, {
		title: '待配送'
	}, {
		title: '配送中'
	}, {
		title: '已领取'
	}])

	let list2 = reactive([{
		title: '待接单'
	},
	{
		title: '待领取'
	},{
		title: '已完成'
	}])

	let orders = () => {
		// if (!this.$store.getters.isLogin) {
		// 	uni.navigateTo({
		// 		url: '/pages/login/login'
		// 	})
		// 	return
		// }
		uni.navigateTo({
			url: '/pages/orders/orders'
		})
	}
	let menu = () => {
		uni.switchTab({
			url: '/pages/menu/menu'
		})
	}

	onLoad(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('orderDetailData', async (data) => {
			if (data.data) {
				orderDetail.value = data.data
				console.log(data.data, "resulstfesfsef粉色粉色粉色")
				
				if(data.data=="配送"){
					if(data.data.status==2){
						active.value = 2
					}else if(data.data.status==7){
						active.value = 0
					}else if(data.data.status==5){
						active.value = 3
					}
				}else{
					if(data.data.status==2){
						active.value = 2
					}else if(data.data.status==7){
						active.value = 0
					}else if(data.data.status==5){
						active.value = 3
					}
				}
				
				 // Pending = 1, // 待支付
				 //    ReadyForDelivery = 2, // 待配送
				 //    ReadyForPickup = 3, // 待自提
				 //    InDelivery = 4, // 配送中
				 //    Completed = 5, // 已完成
				 //    Cancelled = 6, // 已取消
				 //    Paid = 7, // 待接单
				
			} else {
				console.log("不打印")
			}

		})
	})
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		min-height: 100%;
		// background-color: $bg-color;
	}

	/* #endif */
	.order-box {
		padding: 20rpx;
		/* #ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
	}

	.drinks-img {
		width: 260rpx;
		height: 260rpx;
	}

	.tips {
		margin: 60rpx 0 80rpx;
		line-height: 48rpx;
	}

	.drink-btn {
		width: 320rpx;
		border-radius: 50rem !important;
		margin-bottom: 40rpx;
		// font-size: $font-size-base;
		line-height: 3.0;
	}

	@mixin arch {
		content: "";
		position: absolute;
		// background-color: $bg-color;
		width: 30rpx;
		height: 30rpx;
		bottom: -15rpx;
		z-index: 10;
		border-radius: 100%;
	}

	.section {
		margin-top: 0;
		position: relative;

		.store {

			box-sizing: border-box;
			overflow: hidden;
			display: flex;
			align-items: center;
			width: 100% !important;
			justify-content: space-between;

			.storetitle {
				box-sizing: border-box;
				flex-direction: column !important;

				.storetitle1 {
					.font-size: 100rpx;
				}
			}
		}

		&::before {
			@include arch;
			left: -15rpx;
		}

		&::after {
			@include arch;
			right: -15rpx;
		}

		.goods {

			.hao {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10px;

				.sort-num {
					font-size: 64rpx;
					font-weight: bold;
					color: #5A5B5C;
					line-height: 2;
				}
			}

			.steam {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
			}

			.storeContent {

				// width: 100% !important;
				// flex-direction: column !important;
				// position: relative !important;
				// display: flex;
				// box-sizing: border-box;
				.storeIn {
					margin-bottom: 40rpx;
					width: 100% !important;
					align-items: center;
					display: flex;
					box-sizing: border-box;
					justify-content: space-between;
					margin-top: 20px;

					.storeleft-detail {
						margin-top: 10px;
					}

					.storeright {
						display: flex;
						justify-content: space-between;
						width: 30%;
						align-items: center;


						.storerightprice {
							font-size: 16px;
							color: black;
							font-weight: bold;
							// box-sizing: border-box;
						}

					}
				}

			}
		}
	}

	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// font-size: $font-size-base;
		// color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}

	.sort-num {
		font-size: 64rpx;
		font-weight: bold;
		// color: $text-color-base;
		line-height: 2;
	}

	.steps__img-column {
		display: flex;
		margin: 30rpx 0;

		.steps__img-column-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.steps__text-column {
		display: flex;
		margin-bottom: 40rpx;

		.steps__text-column-item {
			flex: 1;
			display: inline-flex;
			display: flex;
			align-items: center;
			justify-content: center;
			// font-size: $font-size-base;
			// color: $text-color-assist;

			&.active {
				// color: $text-color-base;
				font-weight: bold;

				.steps__column-item-line {
					// background-color: $text-color-base;
				}
			}

			.steps__column-item-line {
				flex: 1;
				height: 2rpx;
				background-color: #919293;
				transform: scaleY(0.5);
			}

			.steps__text-column-item-text {
				margin: 0 8px;
			}
		}
	}
</style>